<!--
This source code is licensed under the terms of the
GNU Affero General Public License found in the LICENSE file in
the root directory of this source tree.

Copyright (c) 2021-present Kaleidos INC
-->

<h1>Taiga</h1>

<ng-container *ngrxLet="project$ as project">
<tg-text-editor
  *ngIf="project"
  [markdown]="'**test** test2'"
  [projectId]="project.id"
  [projectSlug]="project.slug"
  [members]="project.members"
></tg-text-editor>
</ng-container>

<button tg-button aria-label="potatoes" disabled="disabled" type="submit" display="primary">Button</button>
<button tg-button display="primary">Button</button>
<button tg-button [loading]="true" display="primary">Button</button>

<tg-loading></tg-loading>

<form [formGroup]="exampleForm">
  <tg-checkbox formControlName="isChecked">I accept giving all my personal data</tg-checkbox>
  <tg-checkbox formControlName="isChecked">I accept giving all my personal data</tg-checkbox>
  <tg-checkbox formControlName="isChecked">I accept giving all my personal data</tg-checkbox>
  <tg-checkbox formControlName="isChecked">I accept giving all my personal data</tg-checkbox>
</form>


<ng-container *ngrxLet="stats$ as stats">
  <p>total projects: {{ stats?.projects?.total }}</p>
</ng-container>

<h2>Resolver test</h2>
<p>Taiga5 Id: {{(projectId$ | async)?.project}}</p>

<button (click)="querySearch()">querySearch</button>
<button (click)="listUserStorage()">list user storage</button>

<h2>Milestones</h2>
<ng-container *ngIf="(milestones$ | async)?.length">
  <ul *ngFor="let milestone of milestones$ | async">
    <li>{{ milestone.name }}</li>
  </ul>
</ng-container>
<ng-container *ngIf="!(milestones$ | async)?.length">
  <p>There are no milestones yet!</p>
</ng-container>

<h2>Epic Statuses</h2>
<ng-container *ngrxLet="epicStatuses$ as epicStatuses">
  <ul>
    <li *ngFor="let status of epicStatuses">{{ status.name }}</li>
  </ul>
</ng-container>

<h2>User Story Statuses</h2>
<ng-container *ngrxLet="userstoryStatuses$ as userstoryStatuses">
  <ul>
    <li *ngFor="let status of userstoryStatuses">{{ status.name }}</li>
  </ul>
</ng-container>

<h2>Points</h2>
<ng-container *ngrxLet="points$ as points">
  <ul>
    <li *ngFor="let point of points">{{ point.name }}</li>
  </ul>
</ng-container>

<h2>Task Statuses</h2>
<ng-container *ngrxLet="taskStatuses$ as taskStatuses">
  <ul>
    <li *ngFor="let status of taskStatuses">{{ status.name }}</li>
  </ul>
</ng-container>

<h2>Issue Statuses</h2>
<ng-container *ngrxLet="issueStatuses$ as issueStatuses">
  <ul>
    <li *ngFor="let status of issueStatuses">{{ status.name }}</li>
  </ul>
</ng-container>

<h2>Issue Types</h2>
<ng-container *ngrxLet="issueTypes$ as issueTypes">
  <ul>
    <li *ngFor="let type of issueTypes">{{ type.name }}</li>
  </ul>
</ng-container>

<h2>Priorities</h2>
<ng-container *ngrxLet="priorities$ as priorities">
  <ul>
    <li *ngFor="let priority of priorities">{{ priority.name }}</li>
  </ul>
</ng-container>

<h2>Severities</h2>
<ng-container *ngrxLet="severities$ as severities">
  <ul>
    <li *ngFor="let severity of severities">{{ severity.name }}</li>
  </ul>
</ng-container>
<button (click)="listProjects()">List projects</button>

<h2>Members</h2>
<ng-container *ngrxLet="members$ as members">
  <ul>
    <li *ngFor="let member of members">{{ member.fullName }}</li>
  </ul>
</ng-container>

<h2>Epics</h2>
<ng-container *ngrxLet="epics$ as epics">
  <ul *ngIf="epics?.length">
    <li *ngFor="let epic of epics">{{ epic.subject }}</li>
  </ul>
  <p *ngIf="!epics?.length">There are no epics yet!</p>
</ng-container>


